<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table,
        tr,
        td,
        th {
            border: 1px solid green;
            border-collapse: collapse;
            text-align: center;
            margin-top: 20px;
        }

        th,
        td {
            padding: 10px;
        }
    </style>
</head>

<body>
    <div id="app">
        <input type="text" v-model="newName" placeholder="请输入搜索的用户名">
       
        <table>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>联系方式</th>
                <th>年龄</th>
            </tr>
            <tr v-for='(item) in inquire'>
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.sex}}</td>
                <td>{{item.tel}}</td>
                <td>{{item.age}}</td>
            </tr>
        </table>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                newName: "",
                newStudent: [
                    { "id": 1, "name": "张三", "sex": "男", "tel": 13212345644, "age": 18,"pinyin":"zhangsan" },
                    { "id": 2, "name": "李四", "sex": "男", "tel": 13212345644, "age": 21,"pinyin":"lishi" },
                    { "id": 3, "name": "赵柳", "sex": "女", "tel": 13212345644, "age": 16,"pinyin":"zhaoliu" },
                    { "id": 4, "name": "王五", "sex": "男", "tel": 13212345644, "age": 19,"pinyin":"wangwu" },
                    { "id": 5, "name": "小名", "sex": "女", "tel": 13212345644, "age": 22,"pinyin":"xiaoming" },
                    { "id": 6, "name": "大刘", "sex": "男", "tel": 13212345644, "age": 17,"pinyin":"daliu" }
                ]
            },
            computed: {
                inquire: function() {
                    let arr = [];
                   let _this = this;
                    for (let i = 0; i < _this.newStudent.length; i++) {
                        if (this.newStudent[i].name.indexOf(_this.newName) != -1 || this.newStudent[i].pinyin.indexOf(_this.newName) != -1) {
                            arr.push(_this.newStudent[i]);
                        }
                    }
                    return arr;
                }
            }
        });
    </script>
</body>

</html>